<template>
  <el-table ref="reportTable" :data="tableData" style="height: 220px;width: 100%">
    <el-table-column fixed type="index" label="排名" align="center" width="120"/>
    <el-table-column prop="deptName" label="街道" align="center"/>
    <el-table-column prop="projectNum" label="企业数量" align="center">
      <template #default="slot">
        {{ slot.row.projectNum || '-' }}
      </template>
    </el-table-column>
    <el-table-column prop="scale" align="center" label="投资规模">
      <template #default="slot">
        {{ slot.row.scale || '-' }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import digitalDis from "@/assets/data/digitalEconomy/digitalDis.json"

const tableData = reactive(digitalDis)

const reportTable = ref()

const scrollUp = () => {
  nextTick(() => {
    const demo = reportTable.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    const tableScroll = ref(true)
    demo.addEventListener('mouseover', () => {
      tableScroll.value = false
    })
    demo.addEventListener('mouseout', () => {
      tableScroll.value = true
    })
    setInterval(() => {
      if (tableScroll.value) {
        demo.scrollTop += 1
        if (demo.clientHeight + demo.scrollTop === demo.scrollHeight) {
          demo.scrollTop = 0
        }
      }
    }, 100)
  })
}


onMounted(() => {
  scrollUp()
})
</script>


<style scoped lang="less">

</style>
